<template>
	<!-- 购买或者加入购物车的时候选择商品的种类 -->
	<u-popup mode="bottom" v-model="visibile" :z-index="121" border-radius="24" safe-area-inset-bottom>
		<view class="popup-body">
			<view class="popup-title"> 优惠详情 </view>
			<view class="close-icon" @click="hidePopup">
				<view class="icon-box">
					<i class="iconfont icon-close"></i>
				</view>
			</view>
			<view class="integral-list">
				<view class="integral-item" @click="handleUse">
					<view class="item-text">
						<text> 余额抵扣 </text>
						<text v-if="price"> ¥{{ discount }} </text>
					</view>
					<view class="item-status">
						<view v-if="!use" class="default"></view>
						<view v-else class="icon-box">
							<i class="iconfont icon-success-fill"></i>
						</view>
					</view>
				</view>
				<view class="integral-item" @click="handleUnUse">
					<view class="item-text">不使用</view>
					<view class="item-status">
						<view v-if="use" class="default"></view>
						<view v-else class="icon-box">
							<i class="iconfont icon-success-fill"></i>
						</view>
					</view>
				</view>
			</view>

			<!-- 底部按钮 -->
			<view class="foot-btns">
				<view class="foot-content">
					<view class="foot-btn" @click="handleConfirm">确定</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: "",
		props: {
			useBalance: {
				type: Boolean,
				default: true,
			},
			price: {
				type: [String, Number],
				default: "",
			},
		},
		mixins: [],
		components: {},
		data() {
			return {
				visibile: false,
				use: false,
				discount: "0",
			};
		},
		mounted() {},
		watch: {},
		computed: {},
		methods: {
			hidePopup() {
				this.visibile = false;
			},
			showPopup() {
				this.visibile = true;
				this.use = this.useBalance;
				if (this.price) {
					this.discount = this.price;
				}
			},
			handleUnUse() {
				this.use = false;
			},
			handleUse() {
				this.use = true;
			},
			handleConfirm() {
				this.$emit("confirm", {
					status: this.use
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.popup-body {
		width: 100%;
		background-color: #ffffff;
		padding-top: 4.8vw;
		max-height: 80vh;
		position: relative;

		.popup-title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #262626;
			margin-left: 4.8vw;
			padding-bottom: 4.267vw;
		}

		.close-icon {
			// width: 14.93vw;
			height: 14.93vw;
			position: absolute;
			right: 0;
			top: 0;
			z-index: 11;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 34rpx;

			.icon-box {
				width: 5.34vw;
				height: 5.34vw;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #f2f1f2;

				.iconfont {
					color: #8c8c8c;
					font-weight: 600;
					font-size: 28rpx;
				}
			}
		}

		.integral-list {
			width: 100%;
			padding-left: 36rpx;
			padding-bottom: 13.34vw;

			.integral-item {
				width: 100%;
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #f8f8f8;

				.item-text {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #262626;

					text:nth-child(2) {
						color: #f0250e;
						margin-left: 4rpx;
					}
				}

				.item-status {
					padding-right: 36rpx;
					height: 100%;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					position: relative;

					.default {
						width: 32rpx;
						height: 32rpx;
						border: 1px solid #919191;
						border-radius: 50%;
					}

					.icon-box {
						width: 42rpx;
						height: 100%;
						position: absolute;
						right: 34rpx;
						top: 0;
						display: flex;
						align-items: center;
					}

					.iconfont {
						color: #f0250e;
						font-size: 46rpx;
					}
				}
			}
		}

		.foot-btns {
			width: 100%;
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 121;
			border-top: 1px solid #f0f1f3;

			.foot-content {
				width: 100%;
				height: 13.34vw;
				padding: 0 4.8vw;
				display: flex;
				justify-content: center;
				align-items: center;

				.foot-btn {
					width: 100%;
					height: 10.134vw;
					background: linear-gradient(90deg, #f22407 0%, #f84d17 100%);
					border-radius: 5.067vw;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 600;
					color: #ffffff;
				}

				.btn-grey {
					background: #e4e4e4;
				}
			}

			.safe {
				padding-bottom: env(safe-area-inset-bottom);
			}
		}
	}
</style>